<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div id="box">
      <!-- 头部全部商品 -->
      <div class="header">
        <ul class="clearfix">
          <li class="active">
            <a href="javasscript:;">全部商品<span>4</span></a>
          </li>
          <li>
            <a href="javasscript:;">降价商品<span>0</span></a>
          </li>
          <li>
            <a href="javasscript:;">库存紧张<span>0</span></a>
          </li>
        </ul>
      </div>
      <!-- 全选导航 -->
      <div class="all clearfix">
        <div class="allSelect items">
          <input type="checkbox" id="secectAll" />
          <label for="secectAll">全选</label>
        </div>
        <div class="shopIdea items">商品信息</div>
        <div class="onePrice items">单价</div>
        <div class="numb items">数量</div>
        <div class="price items">金额</div>
        <div class="oprate items">操作</div>
      </div>
      <!-- 中间商品 -->
      <div class="center">
        <div class="item clearfix">
          <div class="shopHeader">
            <input type="checkbox" id="shopSelect" class="single" />
            <div class="shopLogo"></div>
            <div class="shopName">
              店铺 : <span class="title">Tesla特斯拉官方旗</span>
            </div>
            <div class="wangwang"></div>
          </div>
          <div class="shoper">
            <ul class="every clearfix">
              <li><input type="checkbox" class="single" /></li>
              <li>
                <img class="poto" src="./img/whiteTSL.png" alt="白色特斯拉" />
              </li>
              <li class="others clearfix">
                <div class="left">
                  <div class="title">
                    Tesla特斯拉新能源电动车线上试驾Model X 预约试驾
                  </div>
                  <div class="hots"><img src="./img/fa-ran.png" alt="" /></div>
                  <div class="hua"><img src="./img/fa-hua.png" alt="" /></div>
                </div>
                <div class="right">
                  <div>提货方式:电子兑换十点十分大方券</div>
                  <div>提货方式:电子兑换十大方券</div>
                  <div>提货方式:电子兑换十大方券</div>
                  <div>提货方式:电子兑换十大方券</div>
                  <div>提货方式:电子兑换十大方券</div>
                  <div>提货方式:电子兑换十点十分大方券</div>
                </div>
              </li>
              <li class="other">
                <div class="price"><span>￥</span>1.00</div>
              </li>
              <li class="other other1">
                <div class="buyNumb">
                  <span class="btnLeft write">-</span>
                  <span class="centerNum">1</span>
                  <span class="btnRight write">+</span>
                </div>
              </li>
              <li class="other">
                <div class="sum"><span>￥</span>1.00</div>
              </li>
              <li class="other clearfix">
                <div class="oprate">
                  <a href="#">移入收藏夹</a>
                  <a href="#">删除</a>
                  <a href="#" class="same">相似宝贝</a>
                </div>
              </li>
            </ul>

            <ul class="every clearfix">
              <li><input type="checkbox" class="single" /></li>
              <li>
                <img class="poto" src="./img/redTSL.png" alt="红色特斯拉" />
              </li>
              <li class="others clearfix">
                <div class="left">
                  <div class="title">
                    Tesla特斯拉新能源电动车线上试驾Model 3 预约试驾
                  </div>
                  <div class="hots"><img src="./img/fa-ran.png" alt="" /></div>
                  <div class="hua"><img src="./img/fa-hua.png" alt="" /></div>
                </div>
                <div class="right">
                  <span>提货方式:电子兑换十点十分大方券</span>
                </div>
              </li>
              <li class="other">
                <div class="price"><span>￥</span>1.00</div>
              </li>
              <li class="other other1">
                <div class="buyNumb">
                  <span class="btnLeft write">-</span>
                  <span class="centerNum">1</span>
                  <span class="btnRight write">+</span>
                </div>
                <!-- <div class="limit">限购一件</div> -->
              </li>
              <li class="other">
                <div class="sum"><span>￥</span>1.00</div>
              </li>
              <li class="other clearfix">
                <div class="oprate">
                  <a href="#">移入收藏夹</a>
                  <a href="#">删除</a>
                  <a href="#" class="same">相似宝贝</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="item clearfix">
          <div class="shopHeader">
            <input type="checkbox" id="shopSelect" class="single" />
            <div class="shopLogo"></div>
            <div class="shopName">
              店铺 : <span class="title">凯迪拉克官方旗舰</span>
            </div>
            <div class="wangwang"></div>
          </div>
          <div class="shoper">
            <ul class="every clearfix">
              <li><input type="checkbox" class="single" /></li>
              <li>
                <img class="poto" src="./img/KDLK.jpg" alt="白色特斯拉" />
              </li>
              <li class="others clearfix">
                <div class="left">
                  <div class="title">
                    【天猫百亿补贴2000元】凯迪拉克 2020款CT5 28T技术型/时尚型
                  </div>
                  <div class="hots"><img src="./img/fa-ran.png" alt="" /></div>
                  <div class="hua"><img src="./img/fa-hua.png" alt="" /></div>
                </div>
                <div class="right">
                  <span>提货方式:电子兑换十点十分大方券</span>
                </div>
              </li>
              <li class="other">
                <div class="price"><span>￥</span>500.00</div>
              </li>
              <li class="other other1">
                <div class="buyNumb">
                  <span class="btnLeft write">-</span>
                  <span class="centerNum">1</span>
                  <span class="btnRight write">+</span>
                </div>
                <!-- <div class="limit">限购一件</div> -->
              </li>
              <li class="other">
                <div class="sum"><span>￥</span>500.00</div>
              </li>
              <li class="other clearfix">
                <div class="oprate">
                  <a href="#">移入收藏夹</a>
                  <a href="#">删除</a>
                  <a href="#" class="same">相似宝贝</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 底部全选 -->

      <div class="footer clearfix">
        <div class="left">
          <ul>
            <li><input type="checkbox" /><a href="#">全选</a></li>
            <li><a href="#">删除</a></li>
            <li><a href="#">移入收藏夹</a></li>
            <li><a href="#">分享</a></li>
          </ul>
        </div>
        <div class="right">
          <div class="selected">已选商品<span>0</span>件<i class="icon"></i></div>
          <div class="add">合计(不含运费):<span>0.00</span></div>
          <div class="buy">结算</div>
        </div>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>
